<template>
  <div>
    <van-nav-bar
      class="w"
      title="严选专栏"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="box" v-for="item in list" :key="item"  @click="xiang(item.id)">
      <div class="box1">
        <img :src="item.pic" />
      </div>
    <div class="p">
        <h3>{{ item.title }}</h3>
      <p>{{ item.descript }}</p>
      <button>查看详情</button>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$API.zhuanti().then((res) => {
      this.list = res.data.data;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/home" });
    },
      xiang(id){
      this.$router.push({ path: "/xiang",query:{id:id}});
    }
  },
};
</script>
<style  scoped>
.w {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  margin-bottom: 20px;
}
.box{
  display: flex;
  justify-content:space-around;
  align-items:space-around;
}
.box1 {
  width: 360px;
  height: 200px;
  border-radius: 6px;
  margin-top: 50px;
}
.box1 img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  position: relative;
}
.p {
  width: 320px;
  float: left;
  margin-left: -30px;
  margin-top: -154px;
  color: #fff;
  position: absolute;
}
h3,p{
  width: 100%;
  text-align: center;
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 20px;
}
button{
  padding: 5px;
  background:none;
  border:1px solid #fff;
  border-radius: 65px;
margin-left: 130px;
}
</style>